<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mega Menu</title>
	<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="css/lib/bootstrap.css">
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/lib/animate/animation.css">


	<!-- In -->
	<link rel="stylesheet" href="css/lib/in/bounce.css">
	<link rel="stylesheet" href="css/lib/in/bouncySlideIn.css"> 
	<link rel="stylesheet" href="css/lib/in/ExpandInShrinkOut.css">
	<link rel="stylesheet" href="css/lib/in/fade.css">
	<link rel="stylesheet" href="css/lib/in/flip.css">
	<link rel="stylesheet" href="css/lib/in/FlipIn.css">
	<link rel="stylesheet" href="css/lib/in/lightspeed.css">
	<link rel="stylesheet" href="css/lib/in/rollIn.css">
	<link rel="stylesheet" href="css/lib/in/rotate.css">
	<link rel="stylesheet" href="css/lib/in/slide.css">
	<link rel="stylesheet" href="css/lib/in/wobble.css">
	<link rel="stylesheet" href="css/lib/in/zoom.css">

	<!-- Out -->
	<link rel="stylesheet" href="css/lib/out/bounce.css">
	<link rel="stylesheet" href="css/lib/out/fallOffY.css">
	<link rel="stylesheet" href="css/lib/out/fade.css">
	<link rel="stylesheet" href="css/lib/out/flip.css">
	<link rel="stylesheet" href="css/lib/out/FlipOut.css">
	<link rel="stylesheet" href="css/lib/out/lightspeed.css">
	<link rel="stylesheet" href="css/lib/out/rollOut.css">
	<link rel="stylesheet" href="css/lib/out/rotate.css">
	<link rel="stylesheet" href="css/lib/out/slide.css">
	<link rel="stylesheet" href="css/lib/out/wobble.css">
	<link rel="stylesheet" href="css/lib/out/zoom.css">



	<link rel="stylesheet" href="css/lib/page-transitions.css">

	



	<!-- in -->
	<!-- <link rel="stylesheet" href="css/lib/animate/bouncing/in/bounce.css">
	<link rel="stylesheet" href="css/lib/animate/bouncing/out/bounce.css">
	<link rel="stylesheet" href="css/lib/animate/fading/in/fade.css">
	<link rel="stylesheet" href="css/lib/animate/fading/out/fade.css">
	<link rel="stylesheet" href="css/lib/animate/flippers/flip/flip.css">
	<link rel="stylesheet" href="css/lib/animate/flippers/in/flip.css">
	<link rel="stylesheet" href="css/lib/animate/flippers/out/flip.css">
	<link rel="stylesheet" href="css/lib/animate/lightspeed/in/lightspeed.css">
	<link rel="stylesheet" href="css/lib/animate/lightspeed/out/lightspeed.css">
	<link rel="stylesheet" href="css/lib/animate/rotating/in/rotate.css">
	<link rel="stylesheet" href="css/lib/animate/rotating/out/rotate.css">
	<link rel="stylesheet" href="css/lib/animate/sliders/in/slide.css">

	<link rel="stylesheet" href="css/lib/animate/sliders/out/slide.css">
	<link rel="stylesheet" href="css/lib/animate/specials/hinge/hinge.css">
	<link rel="stylesheet" href="css/lib/animate/specials/rollIn/rollIn.css">
	<link rel="stylesheet" href="css/lib/animate/specials/rollOut/rollOut.css">
	<link rel="stylesheet" href="css/lib/animate/zoom/in/zoom.css">
	<link rel="stylesheet" href="css/lib/animate/zoom/out/zoom.css">
	<link rel="stylesheet" href="css/lib/ExpandInShrinkOut/ExpandInShrinkOut.css">
	<link rel="stylesheet" href="css/lib/FlipInFlipOut/in/flip.css">
	<link rel="stylesheet" href="css/lib/FlipInFlipOut/out/flip.css">
	<link rel="stylesheet" href="css/lib/WobbleInWobbleOut/in/wobble.css">
	<link rel="stylesheet" href="css/lib/WobbleInWobbleOut/out/wobble.css">
	<link rel="stylesheet" href="css/lib/BouncySlideInSlide-FallOff/in/bouncySlideIn.css">
	<link rel="stylesheet" href="css/lib/BouncySlideInSlide-FallOff/out/fallOffY.css"> -->


	<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/modernizr.min.js"></script>
	<script src="js/Effeckt.js"></script>
	  <script src="js/modals.js"></script>
	  <script src="js/buttons.js"></script>
	  <script src="js/list-items.js"></script>
	  <script src="js/off-screen-nav.js"></script>
	  <script src="js/page-transitions.js"></script>
	  <!-- <script src="js/list-scroll.js"></script> -->
	  <script src="js/tabs.js"></script>
	  <script src="js/positional-modals.js"></script>
	  <script src="js/captions.js"></script>
	  <!-- <script src="js/demo.js"></script> -->
	<script type="text/javascript" src="js/jquery.custom.js"></script>
</head>
<body>


	<!-- Megamenu -->
	<div id="md-megamenu" class="md-megamenu">
		<div class="container">
			<nav class="navbar">
				<div class="navbar-header">
					<h1 class="md-nav-logo">
						<a href="#">
							<img src="logo.png" alt="">
						</a>
					</h1>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="#"><i class="fa fa-music"></i>Active</i></a></li>
						<li class="dropdown fullwidth">
							<a href="#"><i class="fa fa-th-large"></i>Media<i class="caret"></i></a>
							<ul class="dropdown-menu" data-fade="scale-up-from-behind animation-delay-500">
								<li>
									<!-- Sub MegaMenu -->
									<div class="md-l-dropdown">
										
										<div class="row">
											<div class="col-md-6">
												<div class="media">
													<a class="pull-left" href="#">
														<img class="media-object" src="media-img.jpg" alt="...">
													</a>
													<div class="media-body">
														<h4 class="media-heading">Media heading</h4>
														<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>

													</div>
												</div>
											</div>
											<div class="col-md-6">
												<div class="media">
													<a class="pull-left" href="#">
														<img class="media-object" src="media-img.jpg" alt="...">
													</a>
													<div class="media-body">
														<h4 class="media-heading">Media heading</h4>
														<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
													</div>
												</div>
											</div>
										</div>
								
										
									</div>
								</li>
							</ul>
							
						</li>
						<li><a href="#"><i class="fa fa-desktop"></i>Mutil Column<i class="caret"></i></a></li>
						<li class="dropdown fullwidth">
							<a href="#"><i class="fa fa-th"></i>Grid<i class="caret"></i></a>
							<ul class="dropdown-menu" data-fade="rotateInDownLeft animated">
								<li>
									<!-- Sub MegaMenu -->
									<div class="md-l-dropdown">
										<div class="row">
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#"><i class="fa fa-anchor"></i>Widget<i class="caret"></i></a>
							<ul class="dropdown-menu" data-fade="fadeInDown animated">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li><a href="#">Separated link</a></li>
								<li><a href="#">One more separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
	<!-- End Megamenu -->

	

	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

	<!-- Megamenu -->
	<div id="md-megamenu" class="md-megamenu">
		<div class="container">
			<nav class="navbar">
				<div class="navbar-header">
					<h1 class="md-nav-logo">
						<a href="#">
							<img src="logo.png" alt="">
						</a>
					</h1>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="#"><i class="fa fa-music"></i>Active</i></a></li>
						<li class="dropdown fullwidth">
							<a href="#"><i class="fa fa-th-large"></i>Media<i class="caret"></i></a>
							<ul class="dropdown-menu" data-fade="flipInX animated">
								<li>
									<!-- Sub MegaMenu -->
									<div class="md-l-dropdown">
										<div class="row">
											<div class="col-md-6">
												<div class="media">
													<a class="pull-left" href="#">
														<img class="media-object" src="media-img.jpg" alt="...">
													</a>
													<div class="media-body">
														<h4 class="media-heading">Media heading</h4>
														<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
													</div>
												</div>
											</div>
											<div class="col-md-6">
												<div class="media">
													<a class="pull-left" href="#">
														<img class="media-object" src="media-img.jpg" alt="...">
													</a>
													<div class="media-body">
														<h4 class="media-heading">Media heading</h4>
														<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
							
						</li>
						<li><a href="#"><i class="fa fa-desktop"></i>Mutil Column<i class="caret"></i></a></li>
						<li class="dropdown fullwidth">
							<a href="#"><i class="fa fa-th"></i>Grid<i class="caret"></i></a>
							<ul class="dropdown-menu" data-fade="fadeInDown animated">
								<li>
									<!-- Sub MegaMenu -->
									<div class="md-l-dropdown">
										<div class="row">
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
											<div class="col-md-4">
												<h3 class="title-header">Text Widget</h3>
                                    			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><i class="fa fa-anchor"></i>Widget<i class="caret"></i></a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
	<!-- End Megamenu -->



	<div class="effeckt effeckt-demo-modals">

	  <header>
	    <h2>
	      Page Transitions
	      <a href="page-transitions.html">#</a>
	    </h2>
	    <!-- <span class="source">
	      ...
	    </span> -->
	  </header>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-left" data-effeckt-transition-out="slide-to-right" data-effeckt-transition-page="page-2">Slide From Left</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-right" data-effeckt-transition-out="slide-to-left" data-effeckt-transition-page="page-3">Slide From Right</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-bottom" data-effeckt-transition-out="slide-to-top" data-effeckt-transition-page="page-4">Slide From Bottom</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-top" data-effeckt-transition-out="slide-to-bottom" data-effeckt-transition-page="page-5">Slide From Top</button>


	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-up-from-behind" data-effeckt-transition-out="scale-up-to-front" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Up From Behind</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-down-from-front" data-effeckt-transition-out="scale-down-to-behind" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Down From Front</button>


	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-down-slide-from-right" data-effeckt-transition-out="scale-down-slide-to-left" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Down Slide From Right</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-down-slide-from-left" data-effeckt-transition-out="scale-down-slide-to-right" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Down Slide From Left</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-down-slide-from-top" data-effeckt-transition-out="scale-down-slide-to-bottom" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Down Slide From Top</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="scale-down-slide-from-bottom" data-effeckt-transition-out="scale-down-slide-to-top" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Scale Down Slide From Bottom</button>


	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="rotate-to-front" data-effeckt-transition-out="rotate-to-behind" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Rotate to Behind</button>


	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="flip-to-right-front" data-effeckt-transition-out="flip-to-right-back" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Flip to Right</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="flip-to-left-front" data-effeckt-transition-out="flip-to-left-back" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Flip to Left</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="flip-to-top-front" data-effeckt-transition-out="flip-to-top-back" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Flip to Top</button>

	  <button class="effeckt-page-transition-button" data-effeckt-transition-in="flip-to-bottom-front" data-effeckt-transition-out="flip-to-bottom-back" data-effeckt-transition-page="page-5" data-effeckt-needs-perspective="true">Flip to Bottom</button>

	</div>

	<div class="effeckt-page-transition" id="effeckt-page-transition">

	    <div class="effeckt-page-transition-content">

	      <h2>Page Transition</h2>

	      <p>This is another page.</p>

	      <button class="page-transition-reset-button">Reset Transition</button>

	    </div>

	</div>

	
</body>
</html>
